body, html {
    margin:0;   
    height:100%;
    width:100%;
}

/* COMMON STYLES*/
.view-content h1{
    color:#42454a;
    font-size:1.8em;
}
.view-content h1.welcome{
    text-align:center;
}
.view-content h3{
    color:#42454a;
    font-size:1.1em;
}
.view-content p{
    color:#4a4e54;
    font-size:1em;
}



/* GAME STYLES*/
#game-field {
    position:relative;
    background:orange;    
    color:white;
}

.center10 {    
    display:block;
    width: 75%;
    margin: 10px auto;
    margin-bottom:0;
}

.center10Top {    
    margin: 10px auto;
    margin-bottom:0;
}

.message {
    border:3px solid red;
    padding:5px;
    color: red;
}

.game-cell {
    position: absolute;
    background-repeat: no-repeat;
    background-color:gray;
    box-sizing:border-box;
    text-align:center;
    cursor: pointer;
}

/* SETTINGS STYLES */
#settings-container {
    text-align:center;
}

.bordered {
    box-sizing:border-box;
    border:2px solid gray;
    padding:5px;
}

/* SCORES STYLES */
#scores-list li:nth-of-type(2n) > div {
    background:#ccc;
    color:#555;
    border-color:#555;
}

#scores-list li:nth-of-type(2n+1) > div {
    background:#555;
    color:#ccc;
    border-color:#ccc;
}

/* IMAGE STYLES*/
#logo {
    background-image:url(../styles/images/Game15Logo.jpg);
    background-size: 200px 200px;
    background-repeat:no-repeat;
    text-align:center;
    width:200px;
    height:200px;
    margin:0px auto;
}
.logo {
    background-image:url(../styles/images/logo.png);
    background-repeat:no-repeat;
    width:85px;
    height:60px;
    margin:40px auto;
}

/* BUTTON STYLES*/
.buttonArea {
    text-align: center;
}
.login-button {
    width:85%;
    max-width:300px;
    line-height:1.6em;
}

/* DEVICE SPECIFIC STYLES*/
#skin-change{
    position: absolute;
    right: 10px;
    top: 10px;
}
.km-ios .km-listview-wrapper .km-listinset li{
    background-color:#fff;   
    border-color:#ababab;
}
.km-ios .km-view .km-content{
    background-image: none;
    background: #f0f0f0;
}
.km-tablet .km-ios .km-navbar .km-view-title{
    color:#000;
    text-shadow: 0 -1px rgba(255,255,255,0.3);
}
.km-android .view-content h1 {
    color:#8a8b8f;
}
.km-android .view-content p,
.km-android .view-content h3{
    color:#2e5968;
}
.km-android .weather-info.temperature.low{
    color:#2e5968;
}

.km-ios .km-view .km-content.weather {
    background: #5fb4ed; /* Old browsers */
    background: -moz-linear-gradient(top, #5fb4ed 0%, #0076c5 74%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5fb4ed), color-stop(74%,#0076c5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5fb4ed 0%,#0076c5 74%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5fb4ed 0%,#0076c5 74%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5fb4ed 0%,#0076c5 74%); /* IE10+ */
    background: linear-gradient(to bottom, #5fb4ed 0%,#0076c5 74%); /* W3C */
}
.km-flat .km-view .km-content.weather{
    background:#b0b0b0;
}
.km-flat .km-list>li{
    box-shadow:none;
}

/*.km-view .km-content.weather .forecast-list {
    margin:1em;
}*/

.km-ios .km-list > li,
.km-flat .km-list>li {
    background:none;
    border:none;
}

/* Separator Style*/
.separator > .dark {
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(30%,rgba(0,0,0,0.2)), color-stop(50%,rgba(0,0,0,0.2)), color-stop(70%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);
    height: 1px;
    border: none;
    width: 100%;
    opacity:0.3;
}
.separator > .light {
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    height: 1px;
    border: none;
    width: 100%;
    opacity:0.3;
}

/* RETINA DISPLAY STYLES*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
    .img {
        background-image:url(../styles/images/icenium2x.png);
        background-repeat:no-repeat;
        background-size:100%;
    }
    .logo {
        background-image:url(../styles/images/logo2x.png);
        background-repeat:no-repeat;
        background-size:100%;
    }
}